<template>
  <div>
    <h2>计数器</h2>
    <h3>{{count}}</h3>
    <button @click="increment">+</button>
  </div>
</template>

<script lang='ts'>
/*
  vue3中ref采用了Object.defineProperty作为响应式原理底层实现
  使用ref完成响应式数据步骤
  1、导入ref函数  import {ref} from 'vue'
  2、定义响应式数据: let 变量=ref(初始值)
  3、在<script>中的代码如果要访问响应式数据:变量名.value
  4、在<template>模板中直接操作变量{{变量}}
*/
import {ref} from 'vue'
export default{
  setup(){
    let count=ref(1)  
    console.log('count',count.value);
    const increment=()=>{
      count.value++
    }
    return{
      count,
      increment
    }
  }
}
</script>

<style lang='scss' scoped>
</style>